<html lang="zh-cn">
    <head>
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .ban,.ban a{
                font-size: 1em;
                float: left;
                background-color:rgb(37,95,158);
                text-align: center;
                color:#FFFFFF;
                text-align: center;
                border-right: 1px solid white;
                border-bottom: 1px solid white;
            }
            .ban a{
                padding: 10px 25px;
            }
            .ban ul{
                display: none;
            }
            .ban:hover ul {
                background-color: rgb(255,177,0);
                text-align: center;
                display: block;
                list-style: none;
                clear: both;
            }
            .ban a:hover{
                background-color: rgb(255,177,0);
            }
            .a{
                display: block;
            }
        </style>

    </head>
    <body>
        <ul class="ban">
            <a>菜单1</a>
            <ul>
                <li><a>栏目2</a><li>
                <li><a>栏目2</a><li>
            </ul>
        </ul>
        <ul class="ban">
            <a>菜单2</a>
            <ul>
                <li><a>栏目2</a><li>
                <li><a>栏目2</a><li>
            </ul>
        </ul>
        <ul class="ban">
            <a>菜单3</a>
            <ul>
                <li><a>栏目2</a><li>
                <li><a>栏目2</a><li>
            </ul>
        </ul>
    </body>
<html>
